<template>
  <c-back-wrap :loading="loading" go-page="市场开发/升级月度任务跟进" current-page="详情">
    <QupList :column="3" sep="：" default-value="" label-position="right" label-width="130">
      <QupListItem label="店面升级改造任务号" :value="ctmShopReformTaskFollowUpDTO.taskCode" />
      <QupListItem label="数据来源" :value="ctmMarketDTO.dataSource" dict-type-code="CTM_MARKET_DATA_FROM" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="任务日期" :value="$trimHMS(ctmShopReformTaskFollowUpDTO.taskDate)" />
      <QupListItem label="任务类型" :value="ctmMarketDTO.taskType" dict-type-code="CTM_MARKET_TASK_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="市场编码" :value="ctmMarketDTO.marketCode" />
      <QupListItem label="市场名称" :value="ctmMarketDTO.marketName" />
      <QupListItem label="市场类型" :value="ctmMarketDTO.marketType" dict-type-code="TOBE_MARKET_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="所属办事处编码" :value="ctmMarketDTO.agencyCode" />
      <QupListItem label="办事处名称" :value="ctmMarketDTO.agencyName" />
      <QupListItem label="客户编码" :value="ctmMarketDTO.customerCode" />
      <QupListItem label="客户名称" :value="ctmMarketDTO.customerName" />
      <QupListItem label="门店编码" :value="ctmMarketDTO.shopCode" />
      <QupListItem label="门店名称" :value="ctmMarketDTO.shopName" />
      <QupListItem label="原商家客户编码" :value="ctmMarketDTO.originalCustomerCode" />
      <QupListItem label="原商家客户名称" :value="ctmMarketDTO.originalCustomerName" />
      <QupListItem label="责任人编码" :value="ctmShopReformTaskFollowUpDTO.responsibleCode" />
      <QupListItem label="责任人姓名" :value="ctmShopReformTaskFollowUpDTO.responsibleName" />
      <QupListItem label="责任人联系电话" :value="ctmShopReformTaskFollowUpDTO.responsiblePhone" />
      <QupListItem label="门店建设项目号" :value="ctmShopReformTaskFollowUpDTO.shopBuildNumber" />
      <QupListItem label="门店建设类型" :value="ctmShopReformTaskFollowUpDTO.shopBuildType" dict-type-code="CONST_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="门店建设整体进度" :value="ctmShopReformTaskFollowUpDTO.shopBuildStage" dict-type-code="BEFORE_CONST_SCHEDULE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="分配时间" :value="ctmShopReformTaskFollowUpDTO.createTime" />
      <QupListItem label="市场建设进度" :value="ctmShopReformTaskFollowUpDTO.marketFollowUpStage" dict-type-code="CTM_MARKET_BUID_PROGRESS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="是否完成招商" :value="ctmMarketDTO.isAttractInvestment" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <!-- <QupListItem label="是否缴纳保证金" :value="ctmMarketDTO.isPayEarmestMoney" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
      <!-- <QupListItem label="保证金缴纳时间" :value="ctmMarketDTO.payEarmestMoneyTime" /> -->
      <!-- <QupListItem label="招商经理" :value="ctmMarketDTO.managerName" /> -->
      <!-- <QupListItem label="招商经理电话" :value="ctmMarketDTO.managerPhone" /> -->
      <QupListItem label="结案日期" :value="$trimHMS(ctmShopReformTaskFollowUpDTO.settlementTime)" />
      <QupListItem label="结案方式" :value="ctmShopReformTaskFollowUpDTO.settlementMethod" dict-type-code="CTM_CLOSED_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      <QupListItem label="启用状态" :value="[1,'1'].includes(ctmShopReformTaskFollowUpDTO.enable)?'启用':'停用'" />
      <QupListItem label="特殊说明" :value="ctmShopReformTaskFollowUpDTO.remark" :span="24" />
    </QupList>
    <c-title title="每周进度更新">
      <el-tabs v-model="activeWeek" type="card">
        <el-tab-pane v-for="d in ctmShopBuildWeeklyTaskFollowUpDTOS" :key="d.weekNumber" :name="d.weekNumber.toString()" :label="`第${weekMap[d.weekNumber]}周`">
          <Week :detail="d" />
        </el-tab-pane>
      </el-tabs>
    </c-title>
    <div class="btn-center">
      <c-button type="primary" @click="handleGoBack">返回</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { detailMonthTask } from '@/api/channelTask2/monthTask'
import Week from '@/views/channelTask2/storeUpgrade/weekTask/components/week.vue'
export default {
  name: 'Detail',
  components: {
    Week
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      activeWeek: '1',
      weekMap: {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五'
      }
    }
  },
  computed: {
    ctmMarketDTO() {
      return this.detail.ctmMarketDTO || {}
    },
    ctmShopBuildWeeklyTaskFollowUpDTOS() {
      const t = [...(this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS || [])]
      t.forEach(e => {
        if (!e.ctmMarketDTO) {
          e.ctmMarketDTO = this.ctmMarketDTO
        }
      })
      return t
    },
    ctmShopReformTaskFollowUpDTO() {
      return this.detail.ctmShopReformTaskFollowUpDTO || {}
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      this.loading = true
      return detailMonthTask(this.id).then(res => {
        this.detail = res.data
        this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS = this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS || []
        this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS.sort((a, b) => {
          return a.weekNumber - b.weekNumber
        })
        if (this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS.length > 0) {
          this.activeWeek = this.detail.ctmShopBuildWeeklyTaskFollowUpDTOS[0].weekNumber.toString()
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleGoBack() {
      this.$pageStack.pop()
    }
  }
}
</script>
